<template>
  <el-card shadow="hover" class="section-card" v-if="submitted">
    <template #header>散点设置</template>
    <el-form-item label="P-Value阈值" prop="pValue">
      <el-input-number v-model="form.pValue" :max="1" :min="0" :step="0.001" />
    </el-form-item>
    <el-form-item label="FC阈值" prop="fc">
      <el-input-number v-model="form.fc" :max="100" :min="1" :step="0.1" />
    </el-form-item>
    <el-form-item label="标记数量" prop="top">
      <el-input-number v-model="form.top" :max="5" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="散点形状" prop="pointShape">
      <el-radio-group v-model="form.pointShape">
        <el-radio :label="21">圆形</el-radio>
        <el-radio :label="22">正方形</el-radio>
        <el-radio :label="23">棱形</el-radio>
        <el-radio :label="24">上三角</el-radio>
        <el-radio :label="25">下三角</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="散点大小" prop="pointSize">
      <el-input-number v-model="form.pointSize" :max="100" :min="1" :step="1" />
    </el-form-item>
    <el-form-item label="上调点颜色" prop="upFill">
      <el-color-picker v-model="form.upFill" />
    </el-form-item>
    <el-form-item label="下调点颜色" prop="upFill">
      <el-color-picker v-model="form.downFill" />
    </el-form-item>
    <el-form-item label="非显著点颜色" prop="upFill">
      <el-color-picker v-model="form.notFill" />
    </el-form-item>
    <el-form-item label="散点边框色" prop="pointColor">
      <el-color-picker v-model="form.pointColor" />
    </el-form-item>
    <el-form-item label="散点透明度" prop="pointAlpha">
      <el-input-number v-model="form.pointAlpha" :max="1" :min="0.1" :step="0.1" />
    </el-form-item>
    <el-form-item label="阈值线颜色" prop="lineColor">
      <el-color-picker v-model="form.lineColor" />
    </el-form-item>
    <el-form-item label="阈值线类型" prop="lineType">
      <el-radio-group v-model="form.lineType">
        <el-radio label="solid">实线</el-radio>
        <el-radio label="dashed">虚线</el-radio>
        <el-radio label="dotted">点线</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="阈值线宽度" prop="lineSize">
      <el-input-number v-model="form.lineSize" :max="10" :min="0.1" :step="0.1" />
    </el-form-item>
  </el-card>
</template>

<script lang="ts" setup>
import {computed} from "vue";

defineOptions({nam: "DiffVolcanoCard"})

const props = defineProps<{
  modelValue: {
    pointAlpha: number
    pointColor: string
    upFill: string
    downFill: string
    notFill: string
    pointSize: number
    pointShape: number
    lineColor: string
    lineSize: number
    lineType: string
    pValue : number
    fc: number
    top: number
  }
  submitted: boolean
}>()

const emit = defineEmits<{
  (
    e: 'update:modelValue',
    payload: {
      pointAlpha: number
      pointColor: string
      upFill: string
      downFill: string
      notFill: string
      pointSize: number
      pointShape: number
      lineColor: string
      lineSize: number
      lineType: string
      pValue : number
      fc: number
      top: number
    }
  ): void
}>()


// 内部计算属性，读写都会触发 update:modelValue
const form = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emit('update:modelValue', { ...val })
  }
})



</script>

<style scoped>
.section-card {
  margin-bottom: 16px;
}
</style>
